<template>
	<text :class="classObj.wrapper" @click.stop="handleClick">
		<text
			:class="[classObj.input, { 'is-indeterminate': indeterminate, 'is-checked': checked, 'is-disabled': disabled }]">
			<text :class="classObj.inner"></text>
		</text>
	</text>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { reactive } from 'vue'

interface IclassObj {
	wrapper?: string,
	input?: string,
	inner?: string
}

const classObj = reactive<IclassObj>({})

interface Ip {
	type: 'radio' | 'checkbox'

	checked: boolean,
	disabled: boolean,
	indeterminate: boolean
}

const p = defineProps<Ip>()
const e = defineEmits(['check'])

function handleClick() {
	e('check', p.checked)
}


onMounted(() => {
	classObj.wrapper = `ly-${p.type}`
	classObj.input = `ly-${p.type}__input`
	classObj.inner = `ly-${p.type}__inner`
})


</script>

<style>
/* lyRadio/lyCheckbox-start */
.ly-checkbox,
.ly-radio {
	color: #606266;
	font-weight: 500;
	font-size: 28rpx;
	cursor: pointer;
	user-select: none;
	padding-right: 16rpx
}

.ly-checkbox__input,
.ly-radio__input {
	cursor: pointer;
	outline: 0;
	line-height: 1;
	vertical-align: middle
}

.ly-checkbox__input.is-disabled .ly-checkbox__inner,
.ly-radio__input.is-disabled .ly-radio__inner {
	background-color: #FD754C;
	border-color: #FD754C;
	cursor: not-allowed
}

.ly-checkbox__input.is-disabled .ly-checkbox__inner::after,
.ly-radio__input.is-disabled .ly-radio__inner::after {
	cursor: not-allowed;
	border-color: #FD754C
}

.ly-checkbox__input.is-disabled .ly-checkbox__inner+.ly-checkbox__label,
.ly-radio__input.is-disabled .ly-radio__inner+.ly-radio__label {
	cursor: not-allowed
}

.ly-checkbox__input.is-disabled.is-checked .ly-checkbox__inner,
.ly-radio__input.is-disabled.is-checked .ly-radio__inner {
	background-color: #F2F6FC;
	border-color: #FD754C
}

.ly-checkbox__input.is-disabled.is-checked .ly-checkbox__inner::after,
.ly-radio__input.is-disabled.is-checked .ly-radio__inner::after {
	border-color: #FD754C
}

.ly-checkbox__input.is-disabled.is-indeterminate .ly-checkbox__inner {
	background-color: #F2F6FC;
	border-color: #FD754C
}

.ly-checkbox__input.is-disabled.is-indeterminate .ly-checkbox__inner::before {
	background-color: #FD754C;
	border-color: #FD754C
}

.ly-checkbox__input.is-checked .ly-checkbox__inner,
.ly-radio__input.is-checked .ly-radio__inner,
.ly-checkbox__input.is-indeterminate .ly-checkbox__inner {
	background-color: #FD754C;
	border-color: #FD754C
}

.ly-checkbox__input.is-disabled+text.ly-checkbox__label,
.ly-radio__input.is-disabled+text.ly-radio__label {
	color: #FD754C;
	cursor: not-allowed
}

.ly-checkbox__input.is-checked .ly-checkbox__inner::after,
.ly-radio__input.is-checked .ly-radio__inner::after {
	-webkit-transform: rotate(45deg) scaleY(1);
	transform: rotate(45deg) scaleY(1)
}

.ly-checkbox__input.is-checked+.ly-checkbox__label,
.ly-radio__input.is-checked+.ly-radio__label {
	color: #409EFF
}

.ly-checkbox__input.is-focus .ly-checkbox__inner,
.ly-radio__input.is-focus .ly-radio__inner {
	border-color: #409EFF
}

.ly-checkbox__input.is-indeterminate .ly-checkbox__inner::before {
	content: '';
	position: absolute;
	display: block;
	background-color: #FFF;
	height: 6rpx;
	-webkit-transform: scale(.5);
	transform: scale(.5);
	left: 0;
	right: 0;
	top: 10rpx
}

.ly-checkbox__input.is-indeterminate .ly-checkbox__inner::after {
	display: none
}

.ly-checkbox__inner,
.ly-radio__inner {
	display: inline-block;
	position: relative;
	border: 2rpx solid #FD754C;
	border-radius: 4rpx;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 32rpx;
	height: 32rpx;
	background-color: #FFF;
	z-index: 1;
	-webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
	transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46)
}

.ly-radio__inner {
	border-radius: 50%;
	width: 34rpx !important;
	height: 34rpx !important;
}

.ly-checkbox__inner::after,
.ly-radio__inner::after {
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	content: "";
	border: 2rpx solid #FFF;
	border-left: 0;
	border-top: 0;
	height: 14rpx;
	left: 12rpx;
	position: absolute;
	top: 4rpx;
	-webkit-transform: rotate(45deg) scaleY(0);
	transform: rotate(45deg) scaleY(0);
	width: 6rpx;
	-webkit-transition: -webkit-transform .15s ease-in .05s;
	transition: -webkit-transform .15s ease-in .05s;
	transition: transform .15s ease-in .05s;
	transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
	-webkit-transform-origin: center;
	transform-origin: center
}

.ly-radio__inner::after {
	left: 12rpx !important;
	top: 6rpx !important;
}

/* lyRadio/lyCheckbox-end */
</style>